<template>
	<Layout :class="'bg-white p-2'">
        <Row :class="'m-1'">
            <label >品牌：</label>
            <el-radio-group v-model="brandId" @change="search()">
                  <el-radio-button label=0 >不限</el-radio-button>
                  <el-radio-button label=1 >奔驰</el-radio-button>
                  <el-radio-button label=2 >宝马</el-radio-button>
                  <el-radio-button label=3 >奥迪</el-radio-button>
                  <el-radio-button label=4 >兰博基尼</el-radio-button>
                  <el-radio-button label=5 >本田</el-radio-button>
                  <el-radio-button label=6 >丰田</el-radio-button>
                  <el-radio-button label=7 >长安</el-radio-button>
                  <el-radio-button label=8 >红旗</el-radio-button>
                  <el-radio-button label=9 >大众</el-radio-button>
                  <el-radio-button label=10 >哈弗</el-radio-button>
            </el-radio-group>
            
        </Row>
		<Row :class="'m-1'">
		    <label >价格：</label>
		    <el-radio-group v-model="brandId" @change="search()">
		          <el-radio-button label=0 >不限</el-radio-button>
		          <el-radio-button label=1 >150以下</el-radio-button>
		          <el-radio-button label=2 >150-200</el-radio-button>
		          <el-radio-button label=3 >200-250</el-radio-button>
		          <el-radio-button label=4 >250-300</el-radio-button>
		          <el-radio-button label=5 >300-400</el-radio-button>
		          <el-radio-button label=6 >400-600</el-radio-button>
		          <el-radio-button label=7 >600-1000</el-radio-button>
		          <el-radio-button label=8 >1000以上</el-radio-button>
		    </el-radio-group>
		    <input type="text" style="width: 40px; margin-left: 10px;" v-model="priceMin"/> - <input type="text"  style="width: 40px; margin-left: 10px;" v-model="priceMax"/>
		</Row>
		<Row :class="'m-1'">
			<Button type="error" @click="newCar">新增</Button>
			<Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
            <el-dropdown style="width: 100px;text-align: center;">
              <span class="el-dropdown-link">
                车龄<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>1年以内</el-dropdown-item>
                <el-dropdown-item>3年以内</el-dropdown-item>
                <el-dropdown-item>5年以内</el-dropdown-item>
                <el-dropdown-item>8年以内</el-dropdown-item>
                <el-dropdown-item>8年以上</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown style="width: 100px;text-align: center;">
              <span class="el-dropdown-link">
                里程<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>1万公里以内</el-dropdown-item>
                <el-dropdown-item>3万公里以内</el-dropdown-item>
                <el-dropdown-item>5万公里以内</el-dropdown-item>
                <el-dropdown-item>8万公里以内</el-dropdown-item>
                <el-dropdown-item>10万公里以内</el-dropdown-item>
                <el-dropdown-item>10万公里以上</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
			<Button type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<!-- <template slot-scope="{ row, index }" slot="status">
					<span v-if="row.statu">开</span>
					<span v-else>关</span>
				</template> -->
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.carId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.carId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
					priceMin : 0,
					priceMax : 0,
					searchKey: "",
                    radio1: '奥迪',
					tableInfo: {
						currentPage: 1,
						total: 0,
						pageSize: 10,
						columnInfo: [
							{
								title: "车辆编号",
								key: "carId",
							},
							{
								title: "车名",
								key: "name",
							},
							{
								title: "表显里程",
								key: "mileage",
							},
							{
								title: "燃油类型",
								key: "energy",
							},
                            {
                            	title: "车型",
                            	key: "type",
                            },
                            {
                            	title: "颜色",
                            	key: "color",
                            },
                            {
                            	title: "车龄",
                            	key: "carCondition",
                            },
							{
								title: "操作",
								slot: 'action',
								width: 150
							}
						],
						data: [],
                        brands:[],
					}
				
			};
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
				this.search();
			},
			newCar: function() {
				this.$router.push({
					name: "rentalCar_new"
				});
			},
			show: function(carId) {
				this.$router.push({
					name: "carRental_detail",
					params: {
						carId
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/car-rental-info/list",
					param: {
						currentPage: this.$data.tableInfo.currentPage,
						searchKey: this.$data.searchKey
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				console.log(changedPage);
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			},
			remove: function(carId) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除角色，确定吗？",
					onOk: () => {
						this.http.get({
							url: "/car-rental-info/del",
							param: {
								carId
							}
						}).then(data => {
                            this.message.info('删除成功');
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		},
		created: function() {
			this.init();
		},
	}
</script>

<style>
    .el-dropdown-link {
        
        cursor: pointer;
        color: #409EFF;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
</style>
